<template>
	<view role="dialog" aria-modal="true" class="fade modal-container modal show" tabindex="-1" style="display: block;">
		<view class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-fullscreen">
			<view class="modal-content">
				<view class="modal-header"><button class="left" type="button" data-dismiss="modal" @click="back"
						aria-label="Close"><svg xmlns="http://www.w3.org/2000/svg" width="10" height="15"
							viewBox="0 0 10 15" fill="none">
							<path
								d="M6.67783 1.26902C7.28532 0.723479 8.27024 0.723479 8.87772 1.26902C9.4852 1.81455 9.4852 2.69905 8.87772 3.24458L3.75544 7.84455L8.87772 12.4445C9.4852 12.99 9.4852 13.8745 8.87772 14.4201C8.27024 14.9656 7.28532 14.9656 6.67783 14.4201L0.455612 8.83233C-0.151871 8.28679 -0.151871 7.4023 0.455612 6.85676L6.67783 1.26902Z"
								fill="#C1D1FF"></path>
						</svg></button><span class="title">{{$t('Forgot_trading_password')}}</span></view>
				<view class="modal-body">
					<view class="main-content">
						<form class="form-group register">
							<view><label>{{$t('Electronic_mail')}}</label>
								<view class="mb-3 mt-1 undefined input-group"><input name="username" :placeholder="emil"
										aria-label="[object Object]" type="text" class="form-control" v-model="email"
										disabled style="border-radius: 15px;"></view>
							</view>
							<view style="position: relative;">
								<view><label>{{$t('Verification_code')}}</label>
									<view class="mb-3 mt-1 undefined input-group"><input name="verificationCode"
											:placeholder="in_code" aria-label="[object Object]" type="text"
											class="form-control" v-model="sms_code" style="border-radius: 15px;"></view>
								</view>
								<button v-if="countdown==0" class="btn btn-otp" type="button"
									@click="sendCode">{{$t('send')}}</button>
								<button v-else class="btn btn-otp-g" disabled type="button">
									{{ `${countdown}`  }}
								</button>
							</view>
							<view><label>{{$t('New_trading_password')}}</label>
								<view class="mb-3 mt-1 undefined input-group"><input v-if="!showNew" name="trxPassword"
										:placeholder="enter_new_pwd" aria-label="[object Object]" type="password"
										class="form-control" v-model="new_password" style="border-radius: 15px;">
									<input v-else name="trxPassword" :placeholder="enter_new_pwd"
										aria-label="[object Object]" type="text" class="form-control"
										v-model="new_password" style="border-radius: 15px;">
									<span @click="selectNew"
										style="position: absolute; top: 50%; right: 20px; transform: translate(45%, -50%); cursor: pointer; color: rgb(241, 197, 148); z-index: 5;">
										<svg v-if="!showNew" xmlns="http://www.w3.org/2000/svg" width="16" height="13"
											viewBox="0 0 16 13" fill="none">
											<path fill-rule="evenodd" clip-rule="evenodd"
												d="M4.64124 10.213L3.05 11.8171L3.6618 12.4338L14.9541 1.05058L14.3423 0.433838L12.1557 2.63803C10.8309 1.86241 9.37654 1.43384 7.84981 1.43384C4.85023 1.43384 2.13005 3.08817 0.122841 5.77524C-0.0409471 5.99539 -0.0409471 6.30294 0.122841 6.52309C1.38353 8.21282 2.92547 9.49387 4.64124 10.213ZM5.9624 8.88123L7.07283 7.76185C6.44783 7.45567 6.02753 6.79183 6.07704 6.03424C6.13163 5.1407 6.85102 4.41876 7.7374 4.36048C8.4884 4.31288 9.14808 4.73501 9.45195 5.36355L10.5585 4.24813C9.92354 3.33165 8.84295 2.75255 7.63463 2.82917C5.99032 2.93277 4.65754 4.27631 4.55477 5.93388C4.4788 7.15329 5.05383 8.24169 5.9624 8.88123ZM7.84981 10.8677C7.06034 10.8677 6.29023 10.7531 5.54738 10.5352L6.77455 9.29815C7.17545 9.43747 7.61121 9.50117 8.06498 9.4724C9.70608 9.36556 11.0389 8.02202 11.1448 6.36769C11.1734 5.91001 11.1102 5.47079 10.972 5.06682L12.9021 3.12121C13.8865 3.82139 14.7868 4.71971 15.5768 5.77848C15.7406 5.99863 15.7406 6.30618 15.5768 6.52633C13.5696 9.2134 10.8494 10.8677 7.84981 10.8677ZM9.60488 6.44501C9.47905 7.19665 8.88543 7.79298 8.14433 7.91733L9.60488 6.44501Z"
												fill="#C1D1FF"></path>
										</svg>
										<svg xmlns="http://www.w3.org/2000/svg" width="16" height="10" v-else
											viewBox="0 0 16 10" fill="none">
											<path
												d="M7.84981 0C4.85023 0 2.13005 1.65433 0.122841 4.3414C-0.0409471 4.56155 -0.0409471 4.86911 0.122841 5.08925C2.13005 7.77956 4.85023 9.43389 7.84981 9.43389C10.8494 9.43389 13.5696 7.77956 15.5768 5.09249C15.7406 4.87234 15.7406 4.56479 15.5768 4.34464C13.5696 1.65433 10.8494 0 7.84981 0ZM8.06498 8.03856C6.07382 8.16482 4.42952 6.51049 4.55477 4.50004C4.65754 2.84247 5.99032 1.49893 7.63463 1.39534C9.62579 1.26908 11.2701 2.92341 11.1448 4.93386C11.0389 6.58819 9.70608 7.93172 8.06498 8.03856ZM7.96542 6.50401C6.89277 6.572 6.00638 5.6817 6.07704 4.6004C6.13163 3.70687 6.85102 2.98492 7.7374 2.92664C8.81006 2.85866 9.69644 3.74895 9.62579 4.83026C9.56798 5.72703 8.84859 6.44898 7.96542 6.50401Z"
												fill="#C1D1FF"></path>
										</svg></span>
								</view>
							</view>
							<view><label>{{$t('Confirm_the_password')}}</label>

								<view class="mb-3 mt-1 undefined input-group">

									<input name="trxPassword2" v-if="!showSure" :placeholder="please_enter_pwd"
										aria-label="[object Object]" type="password" class="form-control"
										v-model="sure_new_password" style="border-radius: 15px;">
									<input name="trxPassword2" v-else :placeholder="please_enter_pwd"
										aria-label="[object Object]" type="text" class="form-control"
										v-model="sure_new_password" style="border-radius: 15px;">
									<span @click="selectSure"
										style="position: absolute; top: 50%; right: 20px; transform: translate(45%, -50%); cursor: pointer; color: rgb(241, 197, 148); z-index: 5;">
										<svg v-if="!showSure" xmlns="http://www.w3.org/2000/svg" width="16" height="13"
											viewBox="0 0 16 13" fill="none">
											<path fill-rule="evenodd" clip-rule="evenodd"
												d="M4.64124 10.213L3.05 11.8171L3.6618 12.4338L14.9541 1.05058L14.3423 0.433838L12.1557 2.63803C10.8309 1.86241 9.37654 1.43384 7.84981 1.43384C4.85023 1.43384 2.13005 3.08817 0.122841 5.77524C-0.0409471 5.99539 -0.0409471 6.30294 0.122841 6.52309C1.38353 8.21282 2.92547 9.49387 4.64124 10.213ZM5.9624 8.88123L7.07283 7.76185C6.44783 7.45567 6.02753 6.79183 6.07704 6.03424C6.13163 5.1407 6.85102 4.41876 7.7374 4.36048C8.4884 4.31288 9.14808 4.73501 9.45195 5.36355L10.5585 4.24813C9.92354 3.33165 8.84295 2.75255 7.63463 2.82917C5.99032 2.93277 4.65754 4.27631 4.55477 5.93388C4.4788 7.15329 5.05383 8.24169 5.9624 8.88123ZM7.84981 10.8677C7.06034 10.8677 6.29023 10.7531 5.54738 10.5352L6.77455 9.29815C7.17545 9.43747 7.61121 9.50117 8.06498 9.4724C9.70608 9.36556 11.0389 8.02202 11.1448 6.36769C11.1734 5.91001 11.1102 5.47079 10.972 5.06682L12.9021 3.12121C13.8865 3.82139 14.7868 4.71971 15.5768 5.77848C15.7406 5.99863 15.7406 6.30618 15.5768 6.52633C13.5696 9.2134 10.8494 10.8677 7.84981 10.8677ZM9.60488 6.44501C9.47905 7.19665 8.88543 7.79298 8.14433 7.91733L9.60488 6.44501Z"
												fill="#C1D1FF"></path>
										</svg>
										<svg xmlns="http://www.w3.org/2000/svg" width="16" height="10" v-else
											viewBox="0 0 16 10" fill="none">
											<path
												d="M7.84981 0C4.85023 0 2.13005 1.65433 0.122841 4.3414C-0.0409471 4.56155 -0.0409471 4.86911 0.122841 5.08925C2.13005 7.77956 4.85023 9.43389 7.84981 9.43389C10.8494 9.43389 13.5696 7.77956 15.5768 5.09249C15.7406 4.87234 15.7406 4.56479 15.5768 4.34464C13.5696 1.65433 10.8494 0 7.84981 0ZM8.06498 8.03856C6.07382 8.16482 4.42952 6.51049 4.55477 4.50004C4.65754 2.84247 5.99032 1.49893 7.63463 1.39534C9.62579 1.26908 11.2701 2.92341 11.1448 4.93386C11.0389 6.58819 9.70608 7.93172 8.06498 8.03856ZM7.96542 6.50401C6.89277 6.572 6.00638 5.6817 6.07704 4.6004C6.13163 3.70687 6.85102 2.98492 7.7374 2.92664C8.81006 2.85866 9.69644 3.74895 9.62579 4.83026C9.56798 5.72703 8.84859 6.44898 7.96542 6.50401Z"
												fill="#C1D1FF"></path>
										</svg></span>
								</view>
							</view>

							<!-- <button @click="findPwd" type="submit"
								class="mt-4  btn-primary center">{{$t('sure')}}</button> -->
							<view class="profile-menu-container mt-4" style="padding-top: 40rpx;" @click="findPwd">
								<view class="menu-card row" style="text-align: center; color: #000;">
									<u-button type="button" :loading="isLoading" :loadingText="loading"
										class="menu-card " disabled>{{$t('sure')}}</u-button>
								</view>
							</view>
						</form>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {

		onLoad: function(options) {

		},
		onShow() {
			this.tui.haslogin();
			if (this.tui.isLogin()) {
				this.init();
			}

		},
		data() {
			return {
				// 倒计时时间，如60秒
				code: -100,
				countdown: 0,
				intervalId: 0,
				loading: this.$t('Load'),
				isLoading: false,
				email: '',
				sms_code: '',
				new_password: '',
				sure_new_password: '',
				webURL: "",
				top: 0, //标题图标距离顶部距离
				opacity: 0,
				scrollTop: 0.5,
				productList: [],
				pageIndex: 1,
				loadding: false,
				pullUpOn: true,
				type: '',
				userinfo: {
					'user_tel': this.$t('please_log_in'),
					'referee': this.$t('please_log_in'),
					'user_headimg': '/static/images/my/mine_def_touxiang_3x.png',
				},
				account: '',
				code: '',
				message: this.$t('not_open'),
				showNew: false,
				showSure: false,
				newType: 'password',
				sureType: 'password',
				emil: this.$t('Please_enter_your_email_address'),
				in_code: this.$t('Please_enter_the_verification_code'),
				enter_new_pwd: this.$t('enter_new_pwd'),
				please_enter_pwd: this.$t('Please_enter_the_password')
			}
		},

		methods: {
			back() {
				uni.navigateBack()
			},
			init() {
				let token = this.tui.getToken();
				let datas = {
					token: token,
				};
				let result = this.tui.request('/api/user/userinfo', 'post', datas, 1000, 1, '', 'userinfo');

				Promise.resolve(result).then((value) => {
					if (value.code == 200) {
						this.email = value.data.user_email
					} else {
						this.tui.toast(value.message);
					}
				})
			},
			sendCode() {
				if (this.email == '') {
					return this.tui.toast(this.$t('mailbox_cannot_empty'));
				}
				// 假设这里是发送验证码的逻辑
				console.log('验证码已发送');
				let data = {
					send_type: 4,
					email: this.email
				}
				let that = this
				let nodeData = this.tui.request('/api/message/sendEmail', 'post', data, 1000, 1, '', 'sendEmail');
				Promise.resolve(nodeData).then((value) => {

					if (value.code == 200) {
						this.tui.toast(value.message);
						this.countdown = 60; // 倒计时60秒
						this.intervalId = setInterval(() => {
							if (that.countdown > 0) {
								that.countdown -= 1;
							} else {
								that.countdown = 0;
								clearInterval(that.intervalId);
							}
						}, 1000);
					}
				})

			},
			findPwd() {
				if (this.email == '') {
					return this.tui.toast(this.$t('mailbox_cannot_empty'));
				}
				if (this.sms_code == '') {
					return this.tui.toast(this.$t('code_cannot_be_empty'));
				}
				if (this.new_password == '') {
					return this.tui.toast(this.$t('enter_new_password'));
				}
				if (this.sure_new_password == '') {
					return this.tui.toast(this.$t('enter_confirmed_new_password'));
				}
				if (this.sure_new_password != this.new_password) {
					return this.tui.toast(this.$t('please_re-enter'));
				}
				let token = this.tui.getToken();
				let data = {
					send_type: 4,
					email: this.email,
					sms_code: this.sms_code,
					new_password: this.new_password,
					token: token
				}
				this.isLoading = true;
				let nodeData = this.tui.request('/api/login/emailRetrievalPassword', 'post', data, 1000, 1, '',
					'emailRetrievalPassword');
				Promise.resolve(nodeData).then((value) => {

					if (value.code == 200) {
						this.tui.toast(value.message);
						setTimeout(() => {
							this.isLoading = false;
							uni.navigateBack()

						}, 1000)
					} else {
						this.isLoading = false
					}
				})
			},
			selectNew() {
				this.showNew = !this.showNew
				if (this.showNew) {
					this.newType = 'text'
				} else {
					this.newType = 'password'
				}
			},
			selectSure() {
				this.showSure = !this.showSure
				if (this.showSure) {
					this.sureType = 'text'
				} else {
					this.sureType = 'password'
				}
			},
			href(page) {
				let url = "";
				switch (page) {
					case 1:
						url = "/pages/my/recharge"
						break;
					case 2:
						url = "/pages/my/withdraw"
						break;
					default:
						break;
				}


				if (url) {

					uni.navigateTo({
						url: url
					})
				} else {
					this.tui.toast(this.message)
				}
			},



		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onPullDownRefresh() {
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 200)
		},


	}
</script>

<style lang="scss">
	.center {

		text-align: center;
		line-height: 50px;
		height: 50px;
	}

	.btn-otp-g {
		color: #fff;
		border-radius: 5px;
		background: #cccccc;
		width: auto;
		position: absolute;
		top: 38px;
		font-size: 12px;
		padding: 5px;
		height: auto;
		right: 15px
	}

	.u-button--disabled {
		opacity: 1;
	}
</style>